<template>
  <div class="my-step">
    <ul :style="{ width: `${uWidth}px`, transform: `translateX(${runDistance}px)` }">
      <li v-for="(item, index) in stepArr"
        :class="['step-item', { 'max': item.txt.length > 8 }, { 'so-max': item.txt.length > 15 }, { active: index == activeIndex }]"
        @click="toStep(index)">
        <i :class="item.icon"></i>
        <span class="title-step" v-if="index != 0">{{ index }}、</span>
        <span class="title-txt" :title="item.txt">{{ item.txt }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { Right, Stamp } from '@element-plus/icons-vue'
export default {
  name: 'jbstep',
  dicts: ['sys_normal_disable'],
  props: {
    activeStep: {
      type: [String, Number],
      default: '0'
    }
  },
  watch: {
    activeStep(val) {
      this.activeIndex = val
      this.toStep(val)
    }
  },
  data() {
    return {
      activeIndex: '',
      uWidth: 1920,
      lWidth: 152,
      runDistance: 0, //移动距离
      stepArr: [
        {
          icon: 'el-icon-edit',
          txt: '封面'
        },
        {
          icon: 'el-icon-edit',
          txt: '基本信息'
        },
        {
          icon: 'el-icon-share',
          txt: '负责人任职'
        },
        {
          icon: '',
          txt: '年度登记/备案变更'
        },
        {
          icon: '',
          txt: '年度会议/换届'
        },
        {
          icon: '',
          txt: '内部管理情况'
        },
        {
          icon: '',
          txt: '机构设置情况'
        },
        {
          icon: '',
          txt: '党组织建设情况'
        },
        {
          icon: '',
          txt: '资产负债表'
        },
        {
          icon: '',
          txt: '业务活动表'
        },
        {
          icon: '',
          txt: '现金流量表'
        },
        {
          icon: '',
          txt: '本年度总结/下年度计划'
        },
        {
          icon: '',
          txt: '会费、收费情况'
        },
        {
          icon: '',
          txt: '接受捐赠资助及使用'
        },
        {
          icon: '',
          txt: '公益慈善支出'
        },
        {
          icon: '',
          txt: '评比达标表彰等活动'
        },
        {
          icon: '',
          txt: '援藏援疆及乡村振兴活动'
        },
        {
          icon: '',
          txt: '参与成渝经济圈建设情况'
        },
        {
          icon: '',
          txt: '接受监督检查情况'
        }, {
          icon: '',
          txt: '其它需要说明的情况'
        },
        {
          icon: '',
          txt: '年检审核意见'
        },
        {
          icon: '',
          txt: '承接政府购买'
        },
        {
          icon: '',
          txt: '附件材料'
        },
        {
          icon: '',
          txt: '理事、监事情况'
        }
      ]
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.lWidth = document.getElementsByClassName('step-item')[0].offsetWidth + 10
      this.uWidth = (this.stepArr.length + 1) * this.lWidth
    })
  },

  methods: {
    toStep(index) {
      let setp = 0
      if (index < 6) {
        setp = 0
      } else if (index >= 6 && (this.stepArr.length - index) > 5) {
        setp = 5 - index
      } else {
        setp = (5 + 6) - this.stepArr.length
      }
      this.runDistance = setp * this.lWidth;
      this.$emit('backStep', index)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-switch.is-disabled {
  opacity: 1;
}

.my-step {
  margin: 0px 0px;
  overflow: hidden;
  padding: 0 9px;
  background: #fff;

  ul {
    // display: flex;
    justify-content: space-between;
    padding: 0;
    height: 42px;
    transition: all 0.2s;
    list-style: none;

    li {
      width: 152px;
      height: 40px;
      // line-height: 40px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      // font-size: 16px;
      background: #eee;
      position: relative;
      float: left;
      margin-right: 10px;

      .title-step {
        width: 20px;
        height: 40px;
        line-height: 40px;
        display: inline-block
      }

      .title-txt {
        max-width: 108px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        overflow: hidden;
      }

      &.max {
        span {
          font-size: 12px;
          line-height: 40px;
        }
      }

      &.so-max {
        span {
          font-size: 12px;
          line-height: 20px;
        }
      }

      &::before {
        position: absolute;
        display: inline-block;
        left: 0;
        top: 0;
        content: '';
        width: 12px;
        height: 40px;
        background: #fff;
        -webkit-clip-path: polygon(0 0, 12px 20px, 0px 30px);
        clip-path: polygon(0 0, 12px 20px, 0px 40px);
        z-index: 1;
      }

      &::after {
        position: absolute;
        display: inline-block;
        right: -12px;
        top: -0px;
        content: '';
        width: 12px;
        height: 40px;
        background: #eee;
        -webkit-clip-path: polygon(0 0, 12px 20px, 0px 30px);
        clip-path: polygon(0 0, 12px 20px, 0px 40px);
        z-index: 9;
      }

      &.active {
        color: #fff;
        // padding: 10px 20px;
        background-color: #2652b3;
        position: relative;

        &::before {
          position: absolute;
          display: inline-block;
          left: 0px;
          top: 0px;
          content: '';
          width: 12px;
          height: 40px;
          background: #fff;
          -webkit-clip-path: polygon(0 0, 12px 20px, 0px 30px);
          clip-path: polygon(0 0, 12px 20px, 0px 40px);
        }

        &::after {
          position: absolute;
          display: inline-block;
          right: -12px;
          top: -0px;
          content: '';
          width: 12px;
          height: 40px;
          background: #2652b3;
          -webkit-clip-path: polygon(0 0, 12px 20px, 0px 30px);
          clip-path: polygon(0 0, 12px 20px, 0px 40px);
        }
      }
    }
  }
}
</style>
